import 'package:abc/controller/redeem_controller.dart';
import 'package:abc/view/CustomAppBar.dart';
import 'package:abc/view/CustomInputField.dart';
import 'package:abc/view/GradientButton.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class RedeemPage extends GetView<RedeemController> {
  const RedeemPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final controller = Get.put(RedeemController());
        if (!Get.isRegistered<RedeemController>()) {
      Get.lazyPut(() => RedeemController());
    }
    return Scaffold(
      backgroundColor: const Color(0xFF0E0F26), // 深色背景
      body: Column(
        children: [
          // 顶部导航栏 (使用 CustomAppBar 或标准 AppBar)
          CustomAppBar(
            title: "兑换",
            onBack: () {
              Get.back();
            },
          ),

          Expanded(
            child: SingleChildScrollView(
              // 使用 SingleChildScrollView 包含所有内容
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 9),
                  _buildRedeemInputArea(), // 兑换码输入区域
                  const SizedBox(height: 30),
                  _buildRedeemButton(context), // 立即兑换按钮
                  const SizedBox(height: 30),
                  _buildDetailHeader(), // 兑换明细标题

                  _buildRedeemHistory(), // 兑换明细列表
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // --- 2. 兑换码输入区域 ---
  Widget _buildRedeemInputArea() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 输入框卡片
        Container(
          padding: const EdgeInsets.only(
            left: 10,
            right: 10,
            top: 15,
            bottom: 5,
          ),
      decoration: BoxDecoration(
            color: const Color(0x33959595), // 类似于支付方式卡片的背景色
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '兑换码',
            style: TextStyle(
              color: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
            ),
          ),
              const SizedBox(height: 10),
              TextField(
                controller: controller.codeController, // 使用Controller中的TextEditingController
                decoration: InputDecoration(
                  hintText: '请输入兑换码',
                  hintStyle: TextStyle(color: Colors.white60),
                  contentPadding: const EdgeInsets.symmetric(vertical: 9.0),
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                  ),
                ),
                style: const TextStyle(color: Colors.white),
              ),
            ],
                ),
              ),
        const SizedBox(height: 15),
        // 注意提示
        const Text(
          '注意：每月只能使用一次兑换码',
          style: TextStyle(color: Colors.white60, fontSize: 13),
        ),
      ],
    );
  }

  // --- 3. 立即兑换按钮 ---
  Widget _buildRedeemButton(BuildContext context) {
    return GradientButton(text: '立即兑换', onPressed: () {controller.redeemCode(context);});
  }

  // --- 4. 明细标题 ---
  Widget _buildDetailHeader() {
    return SizedBox(
      height: 44,
      child: Text(
        '兑换明细',
                style: TextStyle(
          color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
          ),
      ),
    );
  }

  


  // --- 兑换历史 ---
  Widget _buildRedeemHistory() {
    //假数据-----------------
    Map<String, String> history = {
      'code': 'VIP2023001',
      'time': '2023-05-15 14:30',
      'status': '月卡',
    };
    Map<String, String> history1 = {
      'code': 'VIP2023002',
      'time': '2023-05-10 09:15',
      'status': '月卡',
    };
    Map<String, String> history2 = {
      'code': 'VIP2023003',
      'time': '2023-05-01 16:45',
      'status': '月卡',
    };
    RedeemDetail redeemDetail = RedeemDetail.fromJson(history);
    RedeemDetail redeemDetail1 = RedeemDetail.fromJson(history1);
    RedeemDetail redeemDetail2 = RedeemDetail.fromJson(history2);
    List<RedeemDetail> listData = [redeemDetail, redeemDetail1, redeemDetail2];
    //假数据-----------------
    return Container(
      padding: const EdgeInsets.only(left: 10,right: 8,bottom: 20),
      decoration: BoxDecoration(
        color: const Color(0x33959595), // 卡片背景色//0x33959595
        borderRadius: BorderRadius.circular(10),
      ),
      child: ListView.builder(
            shrinkWrap: true,
             padding: EdgeInsets.all(0),
            itemCount: listData.length,
            itemBuilder: (context, index) {
              final item = listData[index];
              return RedeemDetailItem(detail: item);
                
            },
            ),
    );
  }
}

// 兑换明细项 Widget
class RedeemDetailItem extends StatelessWidget {
  final RedeemDetail detail;
  
  // 构造函数，要求传入一个 RedeemDetail 对象
  const RedeemDetailItem({
    super.key,
    required this.detail,
  });

  @override
  Widget build(BuildContext context) {
                return Container(
      padding: const EdgeInsets.only(top: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
          // 左侧：兑换码和日期
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                detail.code,
                style: const TextStyle(color: Colors.white, fontSize: 15),
                          ),
              const SizedBox(height: 4),
                          Text(
                detail.time,
                style: const TextStyle(color: Colors.white60, fontSize: 12),
                          ),
                        ],
                      ),
          
          // 右侧：兑换类型/状态
          Text(
            detail.status,
            style: const TextStyle(color: Colors.white, fontSize: 18,fontWeight: FontWeight.w800,),
                      ),
                    ],
                  ),
                );
  }
}

class RedeemDetail {
  final String code; // 兑换码
  final String time; // 兑换时间 
  final String status; // 兑换的类型，例如 '月卡', '永久卡'

  // 构造函数
  RedeemDetail({required this.code, required this.time, required this.status});

  // (可选) 从 Map/JSON 转换的工厂方法
  factory RedeemDetail.fromJson(Map<String, dynamic> json) {
    return RedeemDetail(
      code: json['code'] as String,
      time:  json['time'] as String,
      status: json['status'] as String,
    );
  }
}
